<style lang="scss">
  @import "~@/styles/base";

  .page-setting {
    .user-info {
      position: relative;
      padding-left: rpx(230);
      padding-top: rpx(76);
      margin-bottom: rpx(16);
      height: rpx(220);
      border-radius: rpx(10);
      background-color: $main-color;
      color: #fff;
      line-height: rpx(40);
      .user-logo {
        @include middle-center-y();
        left: rpx(50);
        width: rpx(120);
        height: rpx(120);
        border-radius: 50%;
        background-color: #f2f2f2;
      }
      .user-name {
        font-size: rpx(30);
        letter-spacing: rpx(2);
      }
      .user-role {
        font-size: rpx(24);
        color: #b3d7ff;
      }
      .icon-right {
        @include middle-center-y();
        right: rpx(62);
        width: rpx(16);
      }
    }
    .menu-list {
      margin-bottom: rpx(15);
      padding-left: rpx(36);
      padding-right: rpx(36);
      border-radius: rpx(10);
      background-color: #fff;
      .menu {
        position: relative;
        padding-left: rpx(82);
        .icon {
          @include middle-center-y();
          left: 0;
          width: rpx(48);
          height: rpx(48);
        }
        switch {
          @include middle-center-y();
          right: rpx(48);
        }
        .btn-right {
          @include middle-center-y();
          right: rpx(10);
          width: rpx(16);
          height: rpx(28);
        }
        .title {
          height: rpx(105);
          line-height: rpx(105);
          font-size: rpx(28);
          color: $black;
          border-bottom: rpx(1) solid #dbe5f0;
        }
        &:last-child {
          .title {
            border-bottom: none;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page page-setting">
    <div class="user-info">
      <div class="user-logo"></div>
      <div class="user-name">黄小明</div>
      <div class="user-role">台灯主人</div>
      <img class="icon-right" mode="widthFix" src="/static/img/common/arrow_blue.png">
    </div>
    <ul class="menu-list">
      <li class="menu" @click="toMode('mode-rw')">
        <img class="icon" mode="widthFix" src="/static/img/setting/rw.png">
        <div class="title">读写模式</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu" @click="toMode('mode-pad')">
        <img class="icon" mode="widthFix" src="/static/img/setting/pad.png">
        <div class="title">平板模式</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu">
        <img @click="toMode('mode-sunrise')" class="icon" mode="widthFix" src="/static/img/setting/sunrise.png">
        <div @click="toMode('mode-sunrise')" class="title">日光唤醒</div>
        <switch :checked="sunriseSwitch" :color="switchColor" @change="changeSunrise"></switch>
        <img @click="toMode('mode-sunrise')" class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu">
        <img @click="toMode('mode-timer')" class="icon" mode="widthFix" src="/static/img/setting/timer.png">
        <div @click="toMode('mode-timer')" class="title">定时关机</div>
        <switch :checked="timerSwitch" :color="switchColor" @change="changeTimer"></switch>
        <img @click="toMode('mode-timer')" class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu" @click="toMenu('double-click')">
        <img class="icon" mode="widthFix" src="/static/img/setting/tap.png">
        <div class="title">双击定义</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu">
        <img class="icon" mode="widthFix" src="/static/img/setting/explain.png">
        <div class="title">说明书</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu">
        <img class="icon" mode="widthFix" src="/static/img/setting/mail.png">
        <div class="title">商城</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
    </ul>
    <ul class="menu-list">
      <li class="menu" @click="toMenu('device-list')">
        <img class="icon" mode="widthFix" src="/static/img/setting/switch.png">
        <div class="title">台灯管理</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu" @click="toMenu('device-list')">
        <img class="icon" mode="widthFix" src="/static/img/setting/bond.png">
        <div class="title">绑定与解绑</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sunriseSwitch: false,
        timerSwitch: false,
        switchColor: "#5ba0ee"
      };
    },
    components: {},
    methods: {
      toMode(mode) {
        wx.navigateTo({
          url: `/sub-pages/light/${mode}/main`
        });
      },
      toMenu(pageId) {
        wx.navigateTo({
          url: `/sub-pages/setting/${pageId}/main`
        });
      },
      changeSunrise(e) {
        this.sunriseSwitch = e.mp.detail.value;
        let paramList = [];
        this.sunriseList.forEach(data => {
          paramList.push(this.sunriseSwitch ? 1 : 0);
          paramList.push(parseInt(data.hour));
          paramList.push(parseInt(data.minute));
          paramList.push(data.dayValue);
        });
        while (paramList.length < 40) {
          paramList.push(0);
        }
        const params = {
          wakesUp: paramList
        };
        Store.dispatch("updateDeviceAttrs", params);
      },
      changeTimer(e) {
        this.timerSwitch = e.mp.detail.value;
        let paramList = [];
        this.sunriseList.forEach(data => {
          paramList.push(this.timerSwitch ? 1 : 0);
          paramList.push(parseInt(data.hour));
          paramList.push(parseInt(data.minute));
          paramList.push(data.dayValue);
        });
        while (paramList.length < 40) {
          paramList.push(0);
        }
        const params = {
          timingShutdown: paramList
        };
        Store.dispatch("updateDeviceAttrs", params);
      },
      analysisData(bytes) {
        bytes = _.cloneDeep(bytes);
        const dataList = [];
        while (bytes.length) {
          const paramList = bytes.splice(0, 4);
          const flag = paramList.every(param => {
            return param === 0;
          });
          if (!flag) {
            dataList.push({
              flag: paramList[ 0 ] === 1,
              hour: paramList[ 1 ],
              minute: paramList[ 2 ],
              dayValue: paramList[ 3 ]
            });
          }
          return dataList;
        }
      }
    },
    async onShow() {
      if (!Store.getters.is_login) {
        await Store.dispatch('login');
      }
      this.attrs = await Store.dispatch("getCurrentAttrs");
      this.timeList = this.analysisData(this.attrs.timingShutdown);
      this.timerSwitch = this.timeList.some(time => {
        return time.flag;
      })
      this.sunriseList = this.analysisData(this.attrs.wakesUp);
      this.sunriseSwitch = this.sunriseList.some(time => {
        return time.flag;
      })
    }
  };
</script>
